<template>
    <el-dialog ref="dialogform" :title="addEditName + title" :visible.sync="dialogVisible" width="40%"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="功能权限名称" prop="funcName">
                <el-input v-model="ruleForm.funcName" placeholder="请输入功能权限名称"></el-input>
            </el-form-item>
            <el-form-item label="功能权限值" prop="funcValue">
                <el-input v-model="ruleForm.funcValue" placeholder="请输入功能权限值"></el-input>
            </el-form-item>
            <el-form-item label="功能权限类型" prop="subjectType">
                <el-select v-model="ruleForm.subjectType" class="w100p" placeholder="请选择功能权限类型">
                    <el-option label="功能" value="MENU"></el-option>
                    <el-option label="按钮" value="BUTTON"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="系统功能选择" prop="subjectType">
                <!-- asyncRoutes -->
                <el-tree :data="routerList" node-key="id" default-expand-all :expand-on-click-node="false"
                    :props="{ children: 'children' }">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ data.title }}</span>
                        <span>
                            <el-button type="text" size="mini" @click="() => append(data)">
                                添加
                            </el-button>
                        </span>
                    </span>
                </el-tree>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>

import functionPermissionApi from "@/api/functionPermission"
import { asyncRoutes } from '@/router'
export default {
    components: {},
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        userList: {
            type: Array,
            default: () => {
                return []
            }
        },
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
    },
    data() {
        return {
            addEditName: '添加',
            formData: null,
            routerList: [],
            addEditApi: functionPermissionApi.add,
            ruleForm: {},
            rules: {
                funcName: [
                    { required: true, message: '请输入功能权限名称', trigger: 'change' }
                ],
                funcValue: [
                    { required: true, message: '请输入功能权限值', trigger: 'change' }
                ],
                subjectType: [
                    { required: true, message: '请选择功能权限类型', trigger: 'change' }
                ]
            }
        }
    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },
    computed: {},
    mounted() {
    },
    methods: {
        filterRouter(list = []) {
            let nList = [];
            list.forEach((item, index) => {
                if (item.path !== '*' && item.path !== '/') {
                    nList.push({
                        title: item.meta.title,
                        path: item.path,
                        children: this.filterRouter(item.children || [])
                    })
                }
            })
            return nList
        },
        append(data) {
            this.$set(this.ruleForm, 'funcName', data.title)
            this.$set(this.ruleForm, 'funcValue', data.path)
        },
        initData() {
            this.routerList = this.filterRouter(asyncRoutes)
            console.log(this.routerList, asyncRoutes)
            if (this.addEditFlag == 'add') {
                this.resetForm();
                this.ruleForm = {
                    pid: this.data.functionPermissionId,
                    subjectType: 'MENU'
                }
                console.log(this.ruleForm)
                this.addEditApi = functionPermissionApi.add
                this.addEditName = '添加'
            } else if (this.addEditFlag == 'edit') {
                this.ruleForm = { ...this.data };
                this.addEditApi = functionPermissionApi.edit
                this.addEditName = '编辑'
            }
        },
        //提交表单
        submitForm() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.addEditApi({ ...this.ruleForm }).then(res => {
                        this.$message[res.code == 1 ? 'success' : 'warning'](res.msg)
                        this.cancel()
                    }).catch(err => {
                        this.$message.warning('操作失败')
                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm() {
            this.ruleForm = {};
            this.formData = null;
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        //取消关闭
        cancel() {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>